<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
		
		$(function () {

			$('body').css('color', 'red');

			$('p span').css('color', 'red');

			$('p span').css({'color':'red','font-size':'50px'});

			$('#box').css('color', 'red');

			$('ul .item').css('color', 'red');

			$('.item').click(function(event) {
				alert(8888)
			});

			$('.item').focus(function(event) {
				/* Act on the event */
			});

			$('.item').mouseover(function(event) {
				/* Act on the event */
			});

			$('.item').mouseout(function(event) {
				/* Act on the event */
			});

			$('.item').hover(function() {
				/* Stuff to do when the mouse enters the element */
			}, function() {
				/* Stuff to do when the mouse leaves the element */
			});

		})

	</script>
	<style>
		body{

		}
		p span{

		}
		#box{

		}
		ul .item{

		}
	</style>
</head>
<body>
	<p>
		<span>p-span</span>
	</p>
	<p id="box">p-box</p>
	<ul>
		<li class='item'>ul-li</li>
		<li class='item'>ul-li</li>
		<li class='item'>ul-li</li>
	</ul>
	<span>
		span
	</span>
</body>
</html>